<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="head :: commonHead('添加评价')">

</head>

<body>

<div th:replace="head :: header"></div>


<!-- 主体内容 -->
<div class="works_container identical_order_content clearfix">
    <div class="works_con identical_order_con">
        <form th:action="@{/evaluate/add}" method="post">
            <div class="identical_order_top">
                <h2>评价</h2>
            </div>
            <div class="identical_order_column clearfix">
                <p th:text="${'订单：' + order.no}"></p>
                <input type="hidden" name="target" th:value="${order.id}">

                <p style="margin-left: 150px;">作品符合度：
                    <span style="margin-left: 5px;">
                    <i class="iconfont icon-iconfontxingxing"></i>
                    <i class="iconfont icon-star"></i>
                    <i class="iconfont icon-star"></i>
                    <i class="iconfont icon-star"></i>
                    <i class="iconfont icon-star"></i>
                    <input type="hidden" name="productionConformity.score"/>
                </span>
                </p>

                <p style="margin-left: 62px;">总体满意度：
                    <span style="margin-left: 5px;">
                    <i class="iconfont icon-iconfontxingxing"></i>
                    <i class="iconfont icon-star"></i>
                    <i class="iconfont icon-star"></i>
                    <i class="iconfont icon-star"></i>
                    <i class="iconfont icon-star"></i>
                    <input type="hidden" name="satisficing.score"/>
                </span>
                </p>
                <p style="float: right;" id="current-date"></p>
            </div>

            <div class="works_title" style="margin-bottom: 0;">
                <div class="works_title_l">
                    <em></em>
                    <h3>评价详情</h3>
                </div>
            </div>

            <div class="identical_order_details clearfix" th:if="${order.orderDetail.photoGrapherUser ne null}">
                <div class="left">
                    <img th:if="${order.orderDetail.photoGrapherUser.portrait eq null}" th:src="${#request.getAttribute('ctx') + '/static/front/img/user.png'}">
                    <img th:if="${order.orderDetail.photoGrapherUser.portrait ne null}" th:src="${#request.getAttribute('uploadServer') + order.orderDetail.photoGrapherUser.portrait}">
                </div>
                <div class="right">
                    <div class="r_top clearfix" style="margin-bottom: 12px;">
                        <p>导演满意度：</p>
                        <div class="star">
                            <i class="iconfont icon-iconfontxingxing"></i>
                            <i class="iconfont icon-star"></i>
                            <i class="iconfont icon-star"></i>
                            <i class="iconfont icon-star"></i>
                            <i class="iconfont icon-star"></i>
                            <span style="margin-left: 10px;">1.0</span>
                            <input type="hidden" name="photoGrapher.score"/>
                        </div>
                    </div>
                    <div class="r_middle" style="margin-bottom: 12px;">
                        <p style="margin-top: 6px;">整 体 印 象：</p>
                        <ul class="clearfix" id="photo_grapher_tags">
                            <input type="hidden" name="photoGrapher.tags"/>

                        </ul>
                    </div>
                    <div class="r_bottom">
                        <p>整 体 评 价：</p>
                        <textarea name="photoGrapher.comment" placeholder="300字以内"></textarea>
                    </div>
                </div>
            </div>

            <div class="identical_order_details clearfix" th:if="${order.orderDetail.photoGrapherUser ne null}">
                <div class="left">
                    <img th:if="${order.orderDetail.photoGrapherUser.portrait eq null}" th:src="${#request.getAttribute('ctx') + '/static/front/img/user.png'}">
                    <img th:if="${order.orderDetail.photoGrapherUser.portrait ne null}" th:src="${#request.getAttribute('uploadServer') + order.orderDetail.scriptWriterUser.portrait}">
                </div>
                <div class="right">
                    <div class="r_top clearfix" style="margin-bottom: 12px;">
                        <p>编剧满意度：</p>
                        <div class="star">
                            <i class="iconfont icon-iconfontxingxing"></i>
                            <i class="iconfont icon-star"></i>
                            <i class="iconfont icon-star"></i>
                            <i class="iconfont icon-star"></i>
                            <i class="iconfont icon-star"></i>
                            <span style="margin-left: 10px;">1.0</span>
                            <input type="hidden" name="scriptWriter.score"/>
                        </div>
                    </div>
                    <div class="r_middle" style="margin-bottom: 12px;">
                        <p style="margin-top: 6px;">整 体 印 象：</p>
                        <ul class="clearfix" id="script_writer_tags">
                            <input type="hidden" name="scriptWriter.tags"/>
                        </ul>
                    </div>
                    <div class="r_bottom">
                        <p>整 体 评 价：</p>
                        <textarea name="scriptWriter.comment" placeholder="300字以内"></textarea>
                    </div>
                </div>
            </div>

            <div class="identical_order_details clearfix">
                <div class="left">
                    <img th:src="${#request.getAttribute('ctx') + '/static/front/img/user.png'}">
                </div>
                <div class="right">
                    <div class="r_top clearfix" style="margin-bottom: 12px;">
                        <p>客服满意度：</p>
                        <div class="star">
                            <i class="iconfont icon-iconfontxingxing"></i>
                            <i class="iconfont icon-star"></i>
                            <i class="iconfont icon-star"></i>
                            <i class="iconfont icon-star"></i>
                            <i class="iconfont icon-star"></i>
                            <span style="margin-left: 10px;">1.0</span>
                            <input type="hidden" name="customerService.score"/>
                        </div>
                    </div>
                    <div class="r_middle" style="margin-bottom: 12px;">
                        <p style="margin-top: 6px;">整 体 印 象：</p>
                        <ul class="clearfix" id="customer_service_tags">
                            <input type="hidden" name="customerService.tags"/>

                        </ul>
                    </div>
                    <div class="r_bottom">
                        <p>整 体 评 价：</p>
                        <textarea name="customerService.comment" placeholder="300字以内"></textarea>
                    </div>
                </div>
            </div>

            <div class="identical_order_details clearfix">
                <div class="left">
                    <img th:src="${#request.getAttribute('ctx') + '/static/front/img/user.png'}">
                </div>
                <div class="right">
                    <div class="r_top clearfix" style="margin-bottom: 12px;">
                        <p>作品满意度：</p>
                        <div class="star">
                            <i class="iconfont icon-iconfontxingxing"></i>
                            <i class="iconfont icon-star"></i>
                            <i class="iconfont icon-star"></i>
                            <i class="iconfont icon-star"></i>
                            <i class="iconfont icon-star"></i>
                            <span style="margin-left: 10px;">1.0</span>
                            <input type="hidden" name="production.score"/>
                        </div>
                    </div>
                    <div class="r_middle" style="margin-bottom: 12px;">
                        <p style="margin-top: 6px;">整 体 印 象：</p>
                        <ul class="clearfix" id="production_tags">
                            <input type="hidden" name="production.tags"/>

                        </ul>
                    </div>
                    <div class="r_bottom">
                        <p>整 体 评 价：</p>
                        <textarea name="production.comment" placeholder="300字以内"></textarea>
                    </div>
                </div>
            </div>

            <!-- 评价按钮 -->
            <div class="evaluate_btn">
                <input type="submit" class="submit" name="" value="发表评价"/>
                <div class="niming">
                    <input name="anonymous" type="checkbox" value="true"/>
                    <span style="margin-left: 10px;">匿名评价</span>
                </div>
            </div>
        </form>
    </div>
</div>


<!-- 底部版权信息 -->
<div th:replace="foot :: body"></div>


</body>

<script th:src="${#request.getAttribute('ctx') + '/static/front/js/home.js'}" type="text/javascript" charset="utf-8"></script>

<script th:inline="javascript">

    $(function () {
        $('#current-date').text(new Date().Format('yyyy-MM-dd hh:mm:ss'));
        /*$('.icon-star').mouseover(function () {
            $(this).prevAll('i').removeClass('icon-star').addClass('icon-iconfontxingxing');
            $(this).removeClass('icon-star').addClass('icon-iconfontxingxing');
        });

        $('.icon-star').mouseleave(function () {
            $(this).prevAll('i').removeClass('icon-iconfontxingxing').addClass('icon-star');
            $(this).siblings('i:first').removeClass('icon-star').addClass('icon-iconfontxingxing');
        });*/

        $('.icon-star, .icon-iconfontxingxing').click(function () {
            $(this).siblings('i').removeClass('icon-iconfontxingxing').addClass('icon-star');
            $(this).prevAll('i').removeClass('icon-star').addClass('icon-iconfontxingxing');
            $(this).removeClass('icon-star').addClass('icon-iconfontxingxing');
            $(this).siblings('span').text(($(this).prevAll('i').length + 1) + '.0');
            $(this).siblings('input').val($(this).prevAll('i').length + 1);
        })


        // 加载字典数据
        $.ajax({
            type: 'get',
            url: '/dict/api/list/evaluate-photo-grapher-tags',
            success: function (result) {
                if (result.status == Messages.HTTP_STATUS.SUCCESS) {
                    for (var i in result.data) {
                        $('#photo_grapher_tags').append('<li class="evaluate-tag" data-item-value="' + result.data[i].value + '">' + result.data[i].name + '</li>');
                    }
                    eventCount++;
                }
            }
        })

        $.ajax({
            type: 'get',
            url: '/dict/api/list/evaluate-script-writer-tags',
            success: function (result) {
                if (result.status == Messages.HTTP_STATUS.SUCCESS) {
                    for (var i in result.data) {
                        $('#script_writer_tags').append('<li class="evaluate-tag" data-item-value="' + result.data[i].value + '">' + result.data[i].name + '</li>');
                    }
                    eventCount++;
                }
            }
        })

        $.ajax({
            type: 'get',
            url: '/dict/api/list/evaluate-customer-service-tags',
            success: function (result) {
                if (result.status == Messages.HTTP_STATUS.SUCCESS) {
                    for (var i in result.data) {
                        $('#customer_service_tags').append('<li class="evaluate-tag" data-item-value="' + result.data[i].value + '">' + result.data[i].name + '</li>');
                    }
                    eventCount++;
                }
            }
        })

        $.ajax({
            type: 'get',
            url: '/dict/api/list/evaluate-production-tags',
            success: function (result) {
                if (result.status == Messages.HTTP_STATUS.SUCCESS) {
                    for (var i in result.data) {
                        $('#production_tags').append('<li class="evaluate-tag" data-item-value="' + result.data[i].value + '">' + result.data[i].name + '</li>');
                    }
                    eventCount++;
                }
            }
        })



        var eventCount = 0;

        var bindTagEvent = setInterval(function () {
            if (eventCount == 4) {
                clearInterval(bindTagEvent);
                var value = '';
                $('.evaluate-tag').click(function () {
                    if ($(this).hasClass('evaluate-tag-selected')) {
                        $(this).removeClass('evaluate-tag-selected');
                    } else {
                        value = $(this).attr('data-item-value');
                        $(this).addClass('evaluate-tag-selected');
                    }
                    $(this).siblings('li.evaluate-tag-selected').each(function() {
                        value += (',' + $(this).attr('data-item-value'));
                        $(this).val();
                    })
                    $(this).siblings('input').val(value);
                })
            }
        }, 200);
    })
</script>

</html>
